<div class="layui-fluid nepadmin-pad0 nepadmin-mar0 list0" id="list" lay-title="代理详情" style="height: 500px; overflow: auto">
    <div class="layui-fluid" style="height: 500px;>
        <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-form">

            <table class="layui-table" id="detail">

            </table>
        </div>


    </div>
</div>
</div>
</div>
<script id="detail_tpl" type="text/html">
    <colgroup>
        <col width="100">
        <col width="100">
        <col width="100">
        <col width="100">
        <col width="100">
    </colgroup>

    <tr>
        <th>姓名</th>
        <td>{{d.real_name }}</td>
        <th>性别</th>
        <td> {{#  if(d.sex === 1){ }}
            男
            {{#  } else if(d.sex === 2) { }}
            女
            {{#  } else if(d.sex === 0) { }}
            保密
            {{#  } }}
        </td>
        <th>身份证</th>
        <td>{{d.card_id }}</td>

    </tr>

    <tr>
        <th>佣金余额</th>
        <td>{{d.blance }}</td>
        <th>总佣金</th>
        <td>{{d.total_income }}</td>
        <th>注册日期</th>
        <td>{{d.create_time }}</td>

    </tr>
    <tr>
        <th>手机号</th>
        <td>{{d.tel }}</td>
        <th>负责</th>
        <td colspan="3">{{ d.hotel_name }}</td>
    </tr>
    <tr style="height: 500px">
        <th>拥有设备</th>
        <td colspan="5" id="rechord_list" >
            <table style="width: 100%">
                <thead>
                <tr>
                    <th>设备比id</th>
                    <th>设备分组</th>
                    <th>mac_id</th>
                </tr>
                </thead>
                <tbody style="height:100px">
                {{#  layui.each(d.device_list, function(index, item){ }}
                {{# if(Math.ceil((index+1)/d.device_page_size)==1){}}
                <tr page={{ Math.ceil((index+1)/d.device_page_size)}}>
                {{# }else{ }}
                <tr page={{ Math.ceil((index+1)/d.device_page_size)}} style='display:none'>
                {{# } }}

                <td>{{ item.device_id }} </td>
                <td>{{ item.device_group_name }}</td>
                <td>{{ item.mac_id }}</td>
                </tr>
                {{#  }); }}
                {{#  if(d.device_list.length === 0){ }}
                <tr> <td colspan="3">无数据</td></tr>


                {{#  } }}
                </tbody>
            </table>
            <span>
                 {{#
                for(var i=1;i<=d.device_page;i++){ }}
                {{# if(i==1){}}
                 <a style="" class="on">{{i}}</a>
                {{# }else{}}
                 <a style="" >{{i}}</a>
                {{# } }}
                {{# } }}
            </span>
        </td>
    </tr>
    <tr style="height: 500px">
        <th>提现记录</th>
        <td colspan="5" id="withdraw_list" >
            <table style="width: 100%">
                <thead>
                <tr>
                    <th>提现金额</th>
                    <th>手续费</th>
                    <th>到账金额</th>
                    <th>状态</th>
                    <th>到账方式</th>
                    <th>时间（h）</th>

                </tr>
                </thead>
                <tbody style="height:100px">
                {{#  layui.each(d.withdraw_list, function(index, item){ }}
                {{# if(Math.ceil((index+1)/d.device_page_size)==1){}}
                <tr page={{ Math.ceil((index+1)/d.device_page_size)}}>
                {{# }else{ }}
                <tr page={{ Math.ceil((index+1)/d.device_page_size)}} style='display:none'>
                {{# } }}
                <td>{{ item.withdraw_amount }}</td>
                <td>{{ item.withdraw_fee }}</td>
                <td>{{ item.should_amount }}</td>
                <td>{{ item.status }} </td>
                <td>{{ item.pay_type }}</td>
                <td>{{ item.create_time }} </td>


                </tr>
                {{#  }); }}
                {{#  if(d.withdraw_list.length === 0){ }}
                <tr> <td colspan="6">无数据</td></tr>
                {{#  } }}
                </tbody>
            </table>
            <span>
                 {{#
                for(var i=1;i<=d.withdraw_page;i++){ }}
                {{# if(i==1){}}
                 <a style="" class="on">{{i}}</a>
                {{# }else{}}
                 <a style="" >{{i}}</a>
                {{# } }}
                {{# } }}
            </span>
        </td>
    </tr>
    <tr style="height: 500px">
        <th>佣金记录</th>
        <td colspan="5" id="commission_list" >
            <table style="width: 100%">
                <thead>
                <tr>
                    <th>类型</th>
                    <th>金额</th>
                    <th>时间</th>
                </tr>
                </thead>
                <tbody style="height:100px">
                {{#  layui.each(d.commission_list, function(index, item){ }}
                {{# if(Math.ceil((index+1)/d.commission_page_size)==1){}}
                <tr page={{ Math.ceil((index+1)/d.commission_page_size)}}>
                {{# }else{ }}
                <tr page={{ Math.ceil((index+1)/d.commission_page_size)}} style='display:none'>
                {{# } }}
                <td>{{ item.type }} </td>
                <td>{{ item.change_money }}</td>
                <td>{{ item.opening_time }}</td>
                </tr>
                {{#  }); }}
                {{#  if(d.commission_list.length === 0){ }}
                <tr> <td colspan="3">无数据</td></tr>
                {{#  } }}
                </tbody>
            </table>
            <span>
                 {{#
                for(var i=1;i<=d.commission_page;i++){ }}
                {{# if(i==1){}}
                 <a style="" class="on">{{i}}</a>
                {{# }else{}}
                 <a style="" >{{i}}</a>
                {{# } }}
                {{# } }}
            </span>
        </td>
    </tr>

</script>
<style  type="text/css">
    th {
        background-color: #f1f1f1;
        text-align: center !important;
    }
    td,th {
        text-align: center !important;
        height: 30px !important;
        /*line-height: 30px !important;*/
        padding: 1px;
    }
    a {
        margin-right: 4px;
    }
    span .on{
        color: #FF5722;
        font-weight: bolder;
    }
</style>
<script>
    layui.use(['table','laytpl'], function(){
        var table = layui.table,
            form = layui.form,
            laytpl=layui.laytpl,
            $ = layui.$,laydate=layui.laydate;

        layui.admin.ajax('agents/agent_detail',{agent_id:layui.admin.agent.agent_id},1).then(function(res){
            var data=layui.admin.agent;
            data.device_list=res.data.device_list;
            data.device_page_size=res.data.device_page_size;
            data.device_page=res.data.device_page;

            data.commission_list=res.data.commission_list;
            data.commission_page_size=res.data.commission_page_size;
            data.commission_page=res.data.commission_page;

            data.withdraw_list=res.data.withdraw_list;
            data.withdraw_page_size=res.data.withdraw_page_size;
            data.withdraw_page=res.data.withdraw_page;

            // data.charter_list=res.data.charter_list;
            // data.charter_page_size=res.data.charter_page_size;
            // data.charter_page=res.data.charter_page;

            var getTpl = detail_tpl.innerHTML
                ,view = document.getElementById('detail');
            laytpl(getTpl).render(data, function(html){
                view.innerHTML = html;
            });
            $("span").on('click',"a",function(){
                if ($(this).hasClass('on')) return false;
                $(this).parent().find("a").removeClass('on');
                $(this).addClass('on');

                var page=$(this).text();
                $(this).parent().prev().find('tbody').find('tr').hide();
                $(this).parent().prev().find('tbody').find("tr[page='"+page+"']").show();
            });
        });

    });
</script>
